<template>
  <el-scrollbar height = "80vh">
    <div style = "padding: 10px 0 0">
      <!--歌单头部信息-->
      <el-row class = "playlist-head-container">
        <!--歌单图片-->
        <el-col :span = "6">
          <el-image style = "width: 200px" :src = "logo"></el-image>
        </el-col>
        <!--歌单信息-->
        <el-col style = "padding-left: 20px; align-items: flex-end" :span = "18">
          <!--歌单标题-->
          <el-row class = "al-center">
            <span class = "play-button">VIP专辑</span> <span class = "playlist-title">黑色柳丁</span>
            <router-link :to = "{path:'/EditPlayListInfo'}">
              <i-editor class = "go-edit-info" theme = "outline" size = "17" fill = "#808080" :strokeWidth = "3"
                        strokeLinejoin = "miter" />
            </router-link>

          </el-row>
          <!--歌单作者和创建时间-->
          <el-row class = "row-container al-center">
            <el-avatar size = "small" :src = "logo" />
            <router-link to = "/" style = "font-size: 8px ;padding: 0 5px">你的名字</router-link>
            <span style = "font-size: 8px">2077-9-11创建</span>
          </el-row>
          <!--四个按钮-->
          <el-row style = "padding: 10px 0">
            <el-button class = "add-playlist">
              <i-play-one style = "margin-right: 5px" theme = "filled" size = "17" fill = "#fff" :strokeWidth = "3"
                          strokeLinejoin = "miter" />
              VIP尊享
            </el-button>
            <el-button>
              <i-folder-focus style = "margin-right: 5px" theme = "outline" size = "17" fill = "#838080"
                              :strokeWidth = "3"
                              strokeLinejoin = "miter" />
              收藏
            </el-button>
            <el-button>
              <i-share style = "margin-right: 5px" theme = "two-tone" size = "17" fill = "#838080" :strokeWidth = "3"
                       strokeLinejoin = "miter" />
              分享
            </el-button>
            <el-button>
              <i-download-four style = "margin-right: 5px" theme = "outline" size = "17" fill = "#838080"
                               :strokeWidth = "3"
                               strokeLinejoin = "miter" />
              下载全部
            </el-button>
          </el-row>
          <!--歌单信息-->
          <el-row class = "column-container">
            <!--标签-->
            <el-row>
              <span>标签：</span>
              <el-space spacer = "/">
                <router-link class = "a-tag" to = "/" v-for = "item in 3" :key = "item">{{ item }}</router-link>
              </el-space>
            </el-row>
            <!--歌曲数目-->
            <el-row style = "padding:10px  0;">
              <span>歌曲：</span>
              <span>50</span> &nbsp;
              <span>歌曲：</span>
              <span>50</span>
            </el-row>
            <!--简介-->
            <el-row>
              <span>简介：</span>
              <router-link v-show = "true" class = "a-tag" to = "/">添加简介</router-link>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <!--歌单列表 评论 专辑信息-->
      <el-row style = "padding: 20px 0 ">
        <el-col>
          <el-tabs v-model = "activeName">
            <el-tab-pane label = "歌曲列表" name = "SongTable">
              <!--传歌曲列表数据-->
              <song-table />
            </el-tab-pane>
            <el-tab-pane :label = "`评论（${123}）`" name = "comments">
              <div style = "padding: 0 30px ">
                <base-comment-list></base-comment-list>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if = "isAlbum" label = "专辑信息" name = "albumInfo">
              <div style = "padding: 0 30px ">
                <h4 style = "padding: 10px 0">专辑介绍</h4>
                albumInfo
              </div>
            </el-tab-pane>
            <el-tab-pane v-else label = "收藏者" name = "collectors">
              <div style = "padding: 0 30px ">
                <el-row :gutter = "20">
                  <el-col :span = "24">
                    <collectors />
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup>
import SongTable from "./SongTable"
import logo from "@/assets/logo.png";
import {ref} from "vue";
import Collectors from "@/views/PlayList/Collectors";
import BaseCommentList from "@/components/Base/BaseCommentList";

let activeName = ref('SongTable')
let isAlbum = ref(false)


</script>

<style lang = "less" scoped>

.playlist-head-container {
  padding: 0 30px;

  .play-button {
    font-size: 8px;
    line-height: 20px;
    margin-right: 5px;
    padding: 1px 2px;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 5px;
  }

  .playlist-title {
    font: 20px bolder;
  }

  .add-playlist {
    border-radius: 10px;
    color: #fff;
    background-color: var(--main-color);

    &:hover {
      color: #fff;
      background-color: #d86767;
    }
  }

  .a-tag {
    color: blue;
  }
}

.go-edit-info {
  margin: 5px;

  &:hover {
    opacity: .8;
  }
}

:deep(.el-tabs) {


  .el-tabs__content {
    height: 100%;
  }

  .el-tabs__nav-scroll {
    padding: 0 30px;
  }

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__item.is-active {
    color: black;
    font-size: 15px;
    font-weight: bolder;
  }

  .el-tabs__item:hover {
    color: black;
    font-weight: bold;
  }

  .el-tabs__active-bar {
    background-color: var(--slider-button-color);
  }
}

</style>